import './App.scss'

import {
  RouteObject,
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom'
import { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setMenus } from './store/authSlice'
import gernateRouters from './utils/gernateRouters'
import { constRoute } from './router'
import { getMenuList } from './api/user'
function App() {
  // const { menuList } = useSelector((state: any) => state.authSlice)
  const { token } = useSelector((state: any) => state.userSlice)
  const [router, setRouter] = useState<any>(null)
  const dispatch = useDispatch()

  // 根据菜单的变化生成动态路由, 并将生成的路由传到 createBrowserRouter 中
  useEffect(() => {
    if (!token) {
      // 如果没有 token，无法进行进行请求, 先设置 静态路由, 使能够跳转到登录页面
      setRouter(createBrowserRouter(constRoute))
      return
    }
    // TODO: 解决在非 工作台菜单下刷新显示 404 的问题, 在此处发送请求菜单数据
    getMenuList({ token }).then((res: any) => {
      if (res && !res.menuList) {
        // 没有菜单数据, 渲染静态路由
        setRouter(createBrowserRouter(constRoute))
        return
      }
      // 将菜单保存到 redux 中
      dispatch(setMenus(res.menuList))
      // 有菜单数据, 针对菜单数据生成动态路由
      const routes = gernateRouters(res.menuList)
      const routesC: RouteObject[] = [...constRoute]
      routesC[0].children = routes
      // 设置 第一个 children 的 index 为 true
      if (routesC[0].children && routesC[0].children[0]) {
        routesC[0].children[0].index = true
      }
      const finalRoute = createBrowserRouter(routesC)
      setRouter(finalRoute)
    })
  }, [token, dispatch])

  if (!router) {
    return <div>加载中...</div>
  }
  return (
    <RouterProvider router={router}>
      <div className="App"></div>
    </RouterProvider>
  )
}

export default App
